{% include "public/header.html"%}
<!-- content -->

<div class="content">
    <div class="liucheng">我的购物车</div>
    <div class="mat10">
        <div class="gouwuche">
            <table width="100%" border="0" cellspacing="0" cellpadding="0" class="gwc_tb">
                <tr>
                    <th width="100">商品图片</th>
                    <th >商品名称</th>
                    <th width="160">商品单价(元)</th>
                    <th width="110">购买数量</th>
                    <th width="100">操作</th>
                </tr>

                {% for k,v in info_list %}
                <tr id="{{k}}" class="product_id">
                    <td class="hotimg"><img src="{{res}}/product/{{v.logo}}" /></td>
                    <td style="text-align:left">
                        <a href="/product/{{k}}" title="{{v.name}}" target="_blank" class="cblue font14">{{v.name}}</a>
                    </td>
                    <td class="strong num font14">{{v.money}}</td>
                    <td class="shuliang" style="padding-left:10px;">
                        <span class="img1" onclick="bro_numchange('product_num[{{k}}]', '-', 1);cart_num('{{k}}', 'product_num[{{k}}]')">-</span>
                        <div class="shuliang_box"><input type="text" name="product_num[{{v.pid}}]" value="{{v.pnum}}" readonly /></div>
                        <span class="img2" onclick="bro_numchange('product_num[{{k}}]', '+', {{v.product_maxnum}});cart_num('{{k}}', 'product_num[{{k}}]')">+</span>
                    </td>
                    <td><a href="javascript:cart_del('{{k}}');">删除</a></td>
                </tr>
                {% endfor %}


            </table>
        </div>
        <div class="fukuan font13">
            <strong>应付总额(￥)：</strong><span class="strong num1 font16 cred" id="order_money">{{money.order_money}}</span>(元)
            ＝ <span class="strong num1 font14 cred" id="order_productmoney">{{money.order_productmoney}}</span>(商品总额)
            ＋ <span class="strong num1 font14 cred" id="order_wlmoney">{{money.order_wlmoney}}</span>(运费)
        </div>
        <form method="post" id="form" action="/order/add" onsubmit="return validate('click')">
            <div style="border:1px #ddd solid; padding:10px 20px; margin-top:10px;">
                <h3 class="shxx_tt">付款方式</h3>
                <table width="100%" border="0" cellspacing="0" cellpadding="0" class="shxx mat10">
                    {% for k,v in payway %}
                    <tr>
                        <td width="60" align="right"><input type="radio" name="payway" id="{{k}}" value="{{k}}" checked /></td>
                        <td width="190"><label for="{{k}}">{{v.name}}</label></td>
                        <td class="c666"><label for={{k}}>{{v.ptext}}</label></td>
                    </tr>
                    {% endfor %}
                </table>
                <h3 class="shxx_tt mat10">收货信息</h3>
                <div class="shxx mat10">
                    <table width="100%" border="0" cellspacing="0" cellpadding="0">
                        <tr>
                            <td width="120" style="text-align:right;"><span class="cred1">*</span> 配送区域：</td>
                            <td style="text-align:left;">
                                <select name="province" id="province" class="inputselect"></select>
                                <select name="city" id="city" class="inputselect"></select>
                                <span id="province"></span><span id="city"></span>
                            </td>
                        </tr>
                        <tr>
                            <td style="text-align:right;"><span class="cred1">*</span> 收货地址： </td>
                            <td style="text-align:left;"><input type="text" name="address" value="{{info.address}}" class="inputall input400"> <span class="stats1" id="address">收货地址必须添写详细</span></td>
                        </tr>
                        <tr>
                            <td style="text-align:right;"><span class="cred1">*</span> 收货姓名： </td>
                            <td style="text-align:left;"><input type="text" name="tname" value="{{info.tname}}" class="inputall input150"> <span class="stats1" id="tname">收货人不能为空</span></td>
                        </tr>
                        <tr>
                            <td style="text-align:right;"><span class="cred1">*</span> 联系电话： </td>
                            <td style="text-align:left;"><input type="text" name="phone" value="{{info.phone}}" class="inputall input150"> <span class="stats1" id="phone">联系电话确保准确无误</span></td>
                        </tr>
                        <tr>
                            <td style="text-align:right;">用户留言： </td>
                            <td style="text-align:left;"><textarea class="inputtext" name="content" style="width:400px;height:80px"></textarea></td>
                        </tr>
                        <tr>
                            <td style="text-align:right;"></td>
                            <td style="text-align:left;">
                                <input type="submit" name="do_submit" class="btn_05" value="提交订单" style="margin:0"></td>
                        </tr>
                    </table>
                </div>
            </div>
        </form>
    </div>
</div>

<script type="text/javascript" src="{{public}}/js/shengshi.js"></script>
<script type="text/javascript">
    //改变购物车中的商品数量
    function cart_num(product_id,name) {

        $.getJSON("/order/cartnum", {"pid":product_id,"pnum":$(":input[name='"+name+"']").val()}, function(json){
            if (json.result) {
                $("#order_productmoney").html(json.money.order_productmoney);
                $("#order_wlmoney").html(json.money.order_wlmoney);
                $("#order_money").html(json.money.order_money);
            }
        })
    }

    function cart_del(product_id) {
        if (confirm('您确认要删除该商品吗?') == false) {
            return;
        }
        $.getJSON("/order/cartnum", {"pid":product_id,"pnum":0}, function(json){
            if (json.result) {
                $("#"+product_id).remove();
                $("#order_productmoney").html(json.money.order_productmoney);
                $("#order_wlmoney").html(json.money.order_wlmoney);
                $("#order_money").html(json.money.order_money);
            }
        })
    }


    $(function(){
        $("input[name='payway']").click(function(){
            $(this).parents("table").find("tr").removeClass('sel');
            $(this).parents("tr").addClass('sel');
        })
        $("input[name='payway']").each(function(){
            if ($(this).is(":checked")) $(this).parents("tr").addClass('sel');
        })
    })

    shengshi_init({"pval":"北京市","cval":"北京市"});
</script>


<script type="text/javascript">
    var rclick=null;
    function notnull(val){
        return val.match(/^\S+$/) ? true : false;
    }


    //设置三种状态
    function setStats(objstr,mess,check) {
        obj = document.getElementsByName(objstr)[0];



        obj.onfocus=function(){
            cobj = document.getElementById(objstr);
            cobj.className="stats1";
            cobj.innerHTML=mess;

        }


        obj.onblur=function(){
            cobj = document.getElementById(objstr);
            info=check(this.value, mess);
            if(info[0]){
                cobj.className="stats2";
                cobj.innerHTML="输入正确";
            }else{
                cobj.className="stats3";
                cobj.innerHTML=info[1];

            }
        }

        if(rclick=='click')
            obj.onblur();

    }
    //加载时用
    window.onload=validate;
    //点注册时使用
    function validate(click){
        if(click)
            rclick=click;

        var fg=true;


        setStats("address", '收货地址必须添写详细',function(val, mess){
            var info=[false, mess];
            if(notnull(val) && val.length >=8 ){
                info[0]=true;
            }else{
                fg=false;
            }

            return info;

        });

        setStats("tname",'收货人名称不对!', function(val, mess){
            var info=[false, mess];
            if(notnull(val) && val.length >=2 && val.length <=6 ){
                info[0]=true;
            }else{
                fg=false;
            }
            return info;
        });



        setStats("phone", '联系电话确保准确无误!', function(val, mess){
            var info=[false, mess];

            if(val.match(/(\(\d{3,4}\)|\d{3,4}-|\s)?\d{7,14}/)){
                info[0]=true;
            }else{
                fg=false;
            }
            return info;
        });

        if(click=='click')
            return fg;
    }
</script>


{% include "public/footer.html"%}